<template>
  <div class="role-panel">
    <el-tree
      ref="contactTree"
      :props="{ label: 'name' }"
      :data="roles"
      node-key="id"
      show-checkbox
      check-strictly
      highlight-current
      check-on-click-node
      :expand-on-click-node="false"
      :default-checked-keys="shareData.value"
      @check-change="chooseRole"
    >
    </el-tree>
  </div>
</template>

<script>
/* api */
import * as FlowApi from '@src/api/FlowApi.ts';

export default {
  name: 'config-contact-role',
  props: {
    shareData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      roles: []
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    /** 抓取角色数据 */
    search() {
      const params = {
        pageSize: 0,
        keyword: this.shareData.keyword
      };

      return FlowApi.getRoleList(params)
        .then(result => {
          this.roles = (result && result.list) || [];
        })
        .catch(err => console.error('err', err));
    },
    /** 选择角色 */
    chooseRole(data, checked) {
      this.$emit('update', { data, checked, type: this.shareData.type });
    }
  }
};
</script>

<style lang="scss" scoped>
.role-panel {
  height: 100%;
  padding: 8px 0;
  overflow-y: auto;
}
</style>
